type ListProps<T> = {
  items: T[];
  toKey: (item: T) => string | number;
  children: (item: T) => React.ReactNode;
  onClick?: (item: T) => void;
};

export default function List<T>({ items, toKey, children, onClick }: ListProps<T>) {
  return (
    <ul>
      {items.map((it) => (
        <li
          className="px-4 py-2 text-gray-600 border-t first:border-t-0 hover:cursor-pointer hover:bg-gray-100"
          onClick={() => {
            if (onClick) {
              onClick(it);
            }
          }}
          key={toKey(it)}
        >
          {children(it)}
        </li>
      ))}
    </ul>
  );
}
